<template>
    <div id="app">
        <div class="main-con">
            <el-form ref="form" :model="config" label-width="120px" :rules="rules">
                <div class="title">服务器参数</div>
                <div class="line">
                    <el-form-item label="IP" prop="ip">
                        <el-input v-model="config.ip" placeholder="请输入ip"></el-input>
                    </el-form-item>
                    <el-form-item label="端口" prop='port'>
                        <el-input v-model="config.port" placeholder="请输入端口"></el-input>
                    </el-form-item>
                    <el-form-item label="注册包" prop='register'>
                        <div class="line">
                            <el-input v-model="config.register" placeholder="请输入注册包"></el-input>
                            <el-checkbox v-model="config.registerHex" class='hexChecked'>HEX</el-checkbox>
                        </div>
                    </el-form-item>
                </div>

                <div class="title">心跳</div>
                <div class="line">
                    <el-form-item label="心跳内容" prop='heartBeatContent'>
                        <div class="line">
                            <el-input v-model="config.heartBeatContent" placeholder="请输入心跳内容"></el-input>
                            <el-checkbox v-model="config.heartBeatHex" class='hexChecked'>HEX</el-checkbox>
                        </div>
                    </el-form-item>
                    <el-form-item label="心跳时间(S)" prop='heartBeatTime'>
                        <el-input v-model="config.heartBeatTime" placeholder="请输入心跳时间"></el-input>
                    </el-form-item>
                </div>

                <div class="properties-con">
                    <div class="title">状态</div>
                    <div class="properties">
                        <div class="status" :class="{connected:config.status}"></div>
                    </div>
                </div>

                <el-form-item>
                    <el-button type="primary" @click="save">保存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'remote_connect',
    data () {
      return {
        config: {registerHex: true, heartBeatHex: true, heartBeatTime: 60},
        rules: {
          ip: [{required: true, message: '请输入ip', trigger: 'blur'}],
          port: [{required: true, message: '请输入port', trigger: 'blur'}],
          register: [{required: true, message: '请输入注册包', trigger: 'blur'}],
          heartBeatContent: [{required: true, message: '请输入心跳内容', trigger: 'blur'}],
          heartBeatTime: [{required: true, message: '请输入心跳时间', trigger: 'blur'}]
        }
      }
    },
    mounted () {
      let config = localStorage.getItem('config')
      if (config) {
        config = JSON.parse(config)
        this.config = Object.assign({}, {...config})
      }
    },
    methods: {
      save () {
        this.$refs['form'].validate((valid) => {
          localStorage.setItem('config', JSON.stringify(this.config)) // 存储配置
          if (valid) {
            if (!this.socket) {
              this.init()
            } else {
              this.socket.close()
              this.init()
            }
          } else {
            return false
          }
        })
      },
      init () {
        if (typeof (WebSocket) === 'undefined') {
          this.$notify.error({
            title: '错误',
            message: '不支持'
          })
        } else {
          // eslint-disable-next-line no-unused-vars
          const socket = new WebSocket(encodeURI('ws://' + this.config.ip + ':' + this.config.port))
          this.socket = socket
          // this.socket = new WebSocket(encodeURI('ws://cloud.odin-china.com/websocket/realTimeData?cid=470323707f364a4eaec251ab1562f64a'))
          this.socket.onopen = this.open
          this.socket.onerror = this.error
          this.socket.onmessage = this.onmessage
          this.socket.onclose = this.onclose
        }
      },
      open () {
        console.log('onopen')
        this.socket.send(this.config.register)
      },
      error (e) {
        console.log('onerror:' + JSON.stringify(e))
      },
      onmessage () {
        console.log('onMessage')
      },
      onclose () {
        console.log('onClose')
      }
    }
  }
</script>

<style scoped>
    /* CSS */
    .main-con {
        padding: 20px;
    }

    .line {
        display: flex;
    }

    .properties {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 10px;
        margin-bottom: 20px;
    }

    .title {
        padding-bottom: 10px;
    }

    .status {
        width: 18px;
        height: 18px;
        border-radius: 9px;
        background-color: red;
    }

    .connected {
        background-color: green !important;
    }

    .hexChecked {
        margin-left: 10px;
    }
</style>
